<template>
  <div>
    <el-dialog v-model="dialogVisible" title="编辑用户" draggable style="border-radius: 8px;">
      <el-row :gutter="10" justify="center">
        <el-col :span="4"></el-col>
        <el-col :span="16">
          <el-form :model="obj.form" label-width="120px" :label-position="`left`">
            <el-form-item label="标签ID">
              <el-input v-model="obj.form.labelId" :prefix-icon="Position" placeholder="ID" disabled/>
            </el-form-item>
            <el-form-item label="标签名称">
              <el-input v-model="obj.form.labelName" :prefix-icon="CollectionTag " placeholder="标签"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 100%" size="large" @click="onSubmit">编辑</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4"></el-col>
      </el-row>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {computed, reactive} from 'vue'
import {Position, CollectionTag } from "@element-plus/icons-vue";
import {handleCofirm} from "@/utils/confirm";
import {ElMessage} from "element-plus";
import {watch} from 'vue'
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  dialogTableValue: {
    type: Object,
    default: () => ({})
  }
});

let obj = reactive({
  form:{}
})

watch(() => props.dialogTableValue, () => {
  obj.form = props.dialogTableValue
}, {deep: true, immediate: true})

const emit = defineEmits(['changeDialog', 'Formdialog'])

const dialogVisible = computed({
  get: () => props.show,
  set: (newValue) => {
    emit('changeDialog', newValue)
  },
})

// 提交
const onSubmit = () => {
  handleCofirm().then(res => {
    ElMessage({type: 'success', message: '编辑成功！',})
    emit('changeDialog', false)
    emit('Formdialog', obj.form)
  }).catch(err => {
    ElMessage({type: 'info', message: '取消编辑！',})
  })
}

</script>

<style scoped>
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
